/** * @description: 时间范围（用于筛选-自定义） */
<template>
  <div>
    <div class="date-choose-box" @click="calendarShow = true">
      <van-field v-model="startDate" placeholder="开始时间" />
      <span>—</span>
      <van-field v-model="endDate" placeholder="结束时间" />
    </div>
    <van-calendar ref="calendar" v-model="calendarShow" :min-date="minDate" color="#2E6CF6" type="range">
      <template slot="footer">
        <div class="bottom">
          <van-button round @click="resetDate">重置日期</van-button>
          <van-button round type="info" color="#2E6CF6" @click="onConfirm">确定</van-button>
        </div>
      </template>
    </van-calendar>
  </div>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      minDate: new Date(2008, 10, 1),
      calendarShow: false,
      startDate: undefined,
      endDate: undefined,
    }
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },

    //确定
    onConfirm() {
      let date = this.$refs.calendar.currentDate
      this.startDate = this.formatDate(date[0])
      this.endDate = this.formatDate(date[1])
      this.$emit('dataRange', this.startDate, this.endDate)
      this.calendarShow = false
    },

    //重置日期
    resetDate() {
      this.$refs.calendar.reset()
      this.startDate = undefined
      this.endDate = undefined
    },
  },
}
</script>

<style lang="scss" scoped>
.date-choose-box {
  @include fcb();
  margin-top: 10px;
  .van-cell {
    width: 45%;
    background: #f6f6f6;
    border-radius: 18px;
    ::v-deep {
      .van-field__control {
        text-align: center;
        height: 18px;
        line-height: 18px;
      }
    }
  }
  span {
    font-weight: normal;
    font-size: $fz12;
  }
}
.bottom {
  height: 50px;
  line-height: 50px;
  @include fcb();
  .van-button:first-child {
    width: 100px;
  }
  .van-button {
    height: 34px;
    line-height: 34px;
    width: 225px;
  }
}
</style>
